// 炫彩风格主题
.theme-1 {
  width: 100%;
  height: 100vh;
  position: fixed;
  background: linear-gradient(to right, #55efc4, #81ecec, #74b9ff, #a29bfe, #fd79a8, #ff7675, #fab1a0, #ffeaa7);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  @keyframes gradientBG {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }

  .dra-card {
    border-radius: 20px;

    &:hover {
      border: 1px solid #BE0018;
      color: #BE0018;
    }
  }

  .color {
    border-left: 5px solid #F56C6C
  }

  .foot-button {
    background: #f56c6c;
    border: 3px solid #f56c6c;
  }

  .el-card__body::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 10px;
    background: #f56c6c;
  }

  .el-card__body::-webkit-scrollbar-track { /*滚动条里面轨道*/
    border-radius: 10px;
    background: #ededed;
  }
}

// 蓝白风格主题
.theme-2 {
  width: 100%;
  height: 100vh;
  background: #45aaf2;
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  @keyframes gradientBG {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }

  .dra-card {
    border-radius: 20px;

    &:hover {
      border: 1px solid #45aaf2;
      color: #45aaf2;
    }
  }

  .color {
    border-left: 5px solid #45aaf2
  }

  .foot-button {
    background: #45aaf2;
    border: 3px solid #45aaf2;
  }

  .el-card__body::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 10px;
    background: #45aaf2;
  }

  .el-card__body::-webkit-scrollbar-track { /*滚动条里面轨道*/
    border-radius: 10px;
    background: #ededed;
  }
}

// 黑白风格主题
.theme-3 {
  width: 100%;
  height: 100vh;
  background: #2d3436;
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  @keyframes gradientBG {
    0% {
      background-position: 0 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }

  .dra-card {
    border-radius: 20px;

    &:hover {
      border: 1px solid #2d3436;
      color: #2d3436;
    }
  }

  .color {
    border-left: 5px solid #2d3436
  }

  .foot-button {
    background: #2d3436;
    border: 3px solid #2d3436;
  }

  .el-card__body::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    border-radius: 10px;
    background: #2d3436;
  }

  .el-card__body::-webkit-scrollbar-track { /*滚动条里面轨道*/
    border-radius: 10px;
    background: #ededed;
  }
}